<template>
  <div>
    <x-header :left-options="{showBack: true,preventGoBack:true}" @on-click-back="goBack"
              theme="" class="queryHeader">人员信息</x-header>
    <div>
      <tab>
        <tab-item selected active-class="active-6-3" @on-item-click="onItemClick">基本信息</tab-item>
        <tab-item active-class="active-6-3" @on-item-click="onItemClick">职业信息
        </tab-item>
      </tab>
      <div v-if="currentItem === 0">
        <group label-width="8em">
          <cell title="准备参保人数">
            <i slot="icon" class="iconfont icon-addressbook_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.insuredPeoples}}人</span>
            </div>
          </cell>
          <cell title="在职平均年龄">
            <i slot="icon" class="iconfont icon-like_fill" style="color:#ff9900;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.inAvage}}岁</span>
            </div>
          </cell>
        </group>
        <group label-width="8em">
          <cell title="60周岁以上人员">
            <i slot="icon" class="iconfont icon-people_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.isSixtyPeopleFlag === '0' ? "有" : "无"}}</span>
            </div>
          </cell>
          <cell title="老年人数" v-if="currentData.isSixtyPeopleFlag === '0'">
            <i slot="icon" class="iconfont icon-group_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.peoples}}</span>
            </div>
          </cell>
          <cell title="最高年龄" v-if="currentData.isSixtyPeopleFlag === '0'">
            <i slot="icon" class="iconfont icon-gupiao" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.maxAge}}</span>
            </div>
          </cell>
        </group>
        <group label-width="8em">
          <cell title="男员工人数">
            <i slot="icon" class="iconfont icon-people_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{Number(currentData.males) ? currentData.males + "人" : "无"}}</span>
            </div>
          </cell>
          <cell title="女员工人数">
            <i slot="icon" class="iconfont icon-people_fill" style="color:#ff9900;padding-right: 5px;"></i>
            <div>
              <span>{{Number(currentData.females) ? currentData.females + "人" : "无"}}</span>
            </div>
          </cell>
          <cell title="配偶人数">
            <i slot="icon" class="iconfont icon-group_fill" style="color:#EA5A49;padding-right: 5px;"></i>
            <div>
              <span>{{Number(currentData.spouser) ? currentData.spouser + "人" : "无"}}</span>
            </div>
          </cell>
          <cell title="子女人数">
            <i slot="icon" class="iconfont icon-group_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{Number(currentData.children) ? currentData.children + "人" : "无"}}</span>
            </div>
          </cell>
        </group>
      </div>
      <div v-if="currentItem === 1">
        <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;font-size: 14px">
          <thead>
          <tr style="background-color: #F7F7F7">
            <th>职业代码</th>
            <th>名称</th>
            <th>类别</th>
            <th>人数</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item , index) in currentData.ecinquiryOccupDTOList" :key="index">
            <td>{{item.occupationCode}}</td>
            <td>{{item.occupationName}}</td>
            <td>{{item.occupationType}}</td>
            <td>{{item.peoplesCount}}</td>
          </tr>
          </tbody>
        </x-table>
      </div>
    </div>
  </div>
</template>
<script>
  import {XHeader, Group, Cell, Tab, TabItem, XTable} from 'Vux'
  export default {
    components: {
      XHeader,
      Group,
      Cell,
      Tab,
      TabItem,
      XTable
    },
    data(){
      return {
        currentData: {},
        currentItem: 0
      }
    },
    methods: {
      onItemClick(index){
        this.currentItem = index
      },
      goBack(){
        this.$router.push({
          path:'/listDetail'
        });
        this.$store.commit('CHANGE_TRANSITION', 'right')
      }
    },
    mounted(){
      this.currentData = this.$route.query.info;
    }
  }
</script>
